<template>
  <div>
    <div>
      <h2>批量添加裁判员</h2>
      <form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
          <input type="file" id="file" name="file">
          <el-button type="primary" @click.prevent="uploadfile">上传</el-button>
      </form>
    </div>

    <div>
      <h2>添加裁判员</h2>
      <el-form ref="addform" :rules="rules" :model="addform" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="addform.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="addform.gender" placeholder="请选择性别">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="addform.birthday"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证"  prop="idNum">
              <el-input v-model="addform.idNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="addform.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="住址" prop="homeAddress">
              <el-input v-model="addform.homeAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电子邮件" prop="email">
              <el-input v-model="addform.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文化程度" prop="education">
              <el-input v-model="addform.education"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="民族" prop="nation">
              <el-select v-model="addform.nation" placeholder="">
                <el-option v-for="nation in nations"
                  :key="nation.value"
                  :label="nation.label"
                  :value="nation.value">
                </el-option>
              </el-select>
              
            </el-form-item>
          </el-col>
          <el-col :span="7" v-show="false">
            <el-form-item label="单位" prop="quaId">
              <el-input v-model="addform.quaname"></el-input>
              <el-input type="hidden" v-model.number="addform.quaId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" v-show="false">
            <el-form-item label="设置单位">
              <el-button type="success" @click="setqid">点击设置</el-button>
            </el-form-item>
          </el-col>
          
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="onSubmit('addform')">立即创建</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>


  </div>
</template>
<script>
import mycommon from '../../common/enum';
export default {
  data() {
    return {
      fileName:'',
      fileList:[],
      nations: [],
      addform: {
        name: "",
        gender: '0',
        birthday: "",
        idNum: "",
        mobile: "",
        homeAddress: "",
        email: "",
        education: "", 
        nation: "汉族",
        quaId: 0 ,
        quaname:''
      },
      rules: {
        name:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        gender:[
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        birthday:[
          {type: 'string', required: true, message: '请选择出生日期', trigger: 'change'}
        ],
        idNum:[
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {min:18, max:18, message:'请输入18位身份证号', trigger: 'blur'}
        ],
        mobile:[
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min:11, max:11, message: '请输入11位手机号', trigger: 'blur'}
        ],
        homeAddress:[
          {required: true, message: '请输入家庭住址', trigger: 'blur'},
        ],
        email:[
          {type:'email', required: true, message: '请输入电子邮箱地址', trigger: 'blur'},
        ],
        quaId:[
          {required: false, message:'输入单位id', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) =>{
        console.log(valid);
        if (valid) {
          const reData = {reUserInfo: this.addform}
          this.axios.post('/referee/manage/re',JSON.stringify(reData)).then(res => {
            console.log(res);
          }).catch(err => {
            console.log(err);
          })
        } else {
            console.log(JSON.stringify(this.addform));
            return false;
        } 
      })
    },
    uploadfile(){
      let formData = new FormData();
      const excelfile = document.querySelector('#file');
      formData.append("excelFile", excelfile.files[0]);
      this.axios.post('/referee/manage/re/excel', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
      })
      .then((res) => {
        if (res.data.code ==='0000') {
          this.$message('上传成功', 'success');
        }else{
          this.$message('上传失败，请检查excel格式，数据不好包含空白行','error');
        }
      }).catch((err) => {
        
      });
    },
    setqid(){
      return false;
    }

  },
  mounted(){
    this.nations = mycommon.nations;
  }
};
</script>
